<template>
  <!-- 常规登录 -->
  <div class="commonLogin">
    <!-- 表单 -->
    <el-form-item label="用户名" prop="username">
      <el-input
        type="text"
        v-model="ruleForm.username"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
        type="password"
        v-model="ruleForm.password"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item label="验证码" prop="captcha" ref="captcha">
      <el-input
        v-model="ruleForm.captcha"
        type="text"
        class="captcha"
        id="captcha"
        @keydown.native.enter="submitForm(ruleForm)"
      ></el-input>
      <!-- 验证码 -->
      <span
        class="captcha-svg"
        v-html="captchaSvg"
        @click="getCaptchas"
        v-loading="loading"
      ></span>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" class="submit" @click="submitForm(ruleForm)">
        提交
      </el-button>
    </el-form-item>

    <!-- 短信 -->
    <el-form-item>
      <div class="message">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iphone"></use>
        </svg>
        <a href="javascript:;" @click="messageLogin()">切换短信登录</a>
      </div>
    </el-form-item>
  </div>
</template>
<script>
import * as api from "@/api/users";
export default {
  mounted() {
    this.getCaptchas();
  },
  data() {
    return {
      captchaSvg: "", //验证码
      ismsgLogin: true, //控制是否切换短信登录
      loading: false, //加载动画
      ruleForm: {
        username: "",
        password: "",
        captcha: "",
      },
    };
  },
  // 表单验证思路 ：
  // 当前组件的ruleForm发生变化，同步到父组件的ruleForm
  // 监听输入框的数据变化
  watch: {
    ruleForm: {
      handler(newValue) {
        // console.log(newValue);
        this.$emit("syncRuler", newValue);
      },
      deep: true,
    },
  },
  methods: {
    // 表单提交验证
    submitForm() {
      // console.log(ruleForm);
      this.$emit("submit");
    },
    //封装一个方法 获取验证码
    getCaptchas() {
      //打开加载动画
      this.loading = true;
      api.getCaptcha().then((res) => {
        this.captchaSvg = res.data.img;
        // 关闭加载动画
        this.loading = false;
      });
    },
    messageLogin() {
      this.$emit("changeLogin");
    },
  },
};
</script>
<style scoped lang="less">
.el-input {
  width: 260px;
}
/deep/.el-form-item__label {
  color: white;
  padding: 2px 14px 0 0;
}
.submit {
  width: 260px;
  margin-top: 15px;
}
.message {
  margin: 10px 0 0 60px;
  a {
    color: white;
    text-decoration: none;
  }
}
.icon {
  color: grey;
  vertical-align: middle;
  margin-right: 5px;
  width: 25px !important;
  height: 30px !important;
}

.captcha {
  position: relative;
  /deep/.el-input__inner {
    border: 0;
  }
  /deep/ .el-input__suffix {
    position: absolute;
    top: 0px !important;
    left: -14px !important;
    height: 100%;
    color: #c0c4cc;
    text-align: center;
  }
}

.captcha-svg {
  background: #fff;
  display: inline-block;
  height: 38px;
  width: 130px;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  border: 0;
  position: absolute;
  top: 1px;
  left: 130px;
  border-radius: 0 4px 4px 0;

  /deep/svg {
    width: 120px !important;
    height: 38px;
    // vertical-align: middle;
  }
}
</style>
